<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面 - 派后台管理系统</title>
<link rel="icon" href="__ADMIN_PATH__favicon.ico" type="image/ico">
<meta name="keywords" content="派后台管理系统">
<meta name="description" content="派后台管理系统">
<meta name="author" content="yinqi">
<link href="__ADMIN_PATH__css/bootstrap.min.css" rel="stylesheet">
<link href="__ADMIN_PATH__css/materialdesignicons.min.css" rel="stylesheet">
<link href="__ADMIN_PATH__css/style.min.css" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 29.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
</style>
</head>
  
<body style="background: url('__ADMIN_PATH__images/back.jpg')">
<div class="row lyear-wrapper">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header">
        <div class="row" style="line-height: 36px;">
          <div class="col-xs-8 text-left">
            <a href="/index" style="font-size: 20px;color: #1c1e2f;">派后台管理系统</a>
          </div>
          <div class="col-xs-4 text-right">
            <a onclick="changeLoginType()" style="cursor: pointer;" id="loginLabel">扫码登录</a>
          </div>
        </div>
      </div>
      <div style="height: 212px;width: 100%;display: none;" id="scan">
        <div style="padding: 10px;text-align: center;position: relative;">
          <img src="__ADMIN_PATH__images/wechat.png" id="qrcode" width="160" height="160" alt="请打开微信扫一扫登录" title="请打开微信扫一扫登录">
          <div style="position: absolute;top: 0;left: 0;width: 100%;padding: 10px;display: none;" class="lab_qrcode_text">
            <p style="height: 160px;width: 160px;margin: auto;line-height: 160px;background: rgba(0, 0, 0, 0.6);color: #fff;font-size: 16px;cursor: pointer;" title="点击重新加载" onclick="openws();">二维码已过期</p>
          </div>
        </div>
        <p style="text-align: center;margin-top: 10px;font-size: 20px;">请打开微信扫一扫登录</p>
      </div>
      <form action="#" method="post" style="height: 212px;width: 100%;" id="loginFrm">
        <div class="form-group has-feedback feedback-left has-username" style="margin-bottom: 20px;">
          <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left has-password" style="margin-bottom: 20px;">
          <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left row" style="margin-bottom: 20px;">
          <div class="col-xs-7 has-captchas">
            <input type="text" name="captcha" id="captchas" class="form-control" placeholder="验证码">
            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
          </div>
          <div class="col-xs-5">
            <img src="/admin/login/captcha" class="pull-right" id="captcha" style="cursor: pointer;width: 120px;height: 38px;" onclick="this.src='/admin/login/captcha?d='+Math.random();" title="点击刷新" alt="captcha">
          </div>
        </div>
        <div class="form-group" style="margin-bottom: 20px;">
          <button class="btn btn-block btn-primary" type="button" onclick="btnLogin()">立即登录</button>
        </div>
      </form>
      <hr>
      <footer class="col-sm-12 text-center">
        <p class="m-b-0">Copyright © 2020 LEAPY All right reserved</p>
      </footer>
    </div>
  </div>
</div>
<script type="text/javascript" src="__ADMIN_PATH__js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/bootstrap.min.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/login.js"></script>
<script>
  let scand = false;
  let type = false;
  let protocol = location.protocol === 'https:' ? "wss://"+window.location.host+"/wss" : "ws://"+window.location.host+":1996";
          // 切换登录
  function changeLoginType() {
    $("#loginFrm").toggle();
    $("#scan").toggle();
    type = !type;
    if (type) $("#loginLabel").text("账号登录");
    else $("#loginLabel").text("扫码登录");
    if (!scand && type){
      scand = true;
      openws();
    }
  }
  /**
   * 获取cookie,单个或者多个
   * @param name
   * @returns {any[]|any}
   */
  function getCookies(name)
  {
    var _cookies = document.cookie.split(";");
    const value = new Array();
    if (!Array.isArray(name)) _name = new Array(name);
    for(var i = 0; i < _cookies.length;i++)
    {
      var _cookie = _cookies[i].trim().split("=");
      if (_name.includes(_cookie[0].trim())) value[_cookie[0].trim()] = _cookie[1].trim();
    }
    if (Array.isArray(name)) return value;
    else return value[name];
  }
  let ws = new WebSocket(protocol);
  // 打开 ws
  function openws() {
    let time = null,tryNum = 10;
    if (ws.readyState == 3) ws = new WebSocket(protocol);
    // 关闭遮罩
    $(".lab_qrcode_text").hide();
    try {
      ws.send('{"type":"qrcode","token":"'+getCookies("PHPSESSID")+'"}');
    } catch(err) {
      // 重试10次，每次之间间隔3秒
      time = setTimeout(function () {
        if (tryNum > 0) {
          tryNum--;
          if (ws.readyState == 1)
          {
            clearTimeout(time);
            ws.send('{"type":"qrcode","token":"'+getCookies("PHPSESSID")+'"}');
          }
        } else {
          clearTimeout(time);
          scand = false;
          console.error("连接超时.");
        }
      }, 100);
    }
    ws.onmessage = function(e)
    {
      data = JSON.parse(e.data);
      event(data['type'],data['data'])
    }
  }

  let t1;
  // 事件处理
  function event(type,data)
  {
    switch (type)
    {
      case 'qrcode':
        t1 = setInterval(function () {
          ws.send('{"type":"valid","token":"'+getCookies("PHPSESSID")+'"}');
        }, 2000);
        $("#qrcode").attr("src",data['src']);
        break;
      case 'valid':
        switch (data['status'])
        {
          case 200:
            clearInterval(t1);
            window.location = "/admin/index/index";
            break;
          case 300:
            break;
          case 400:
            clearInterval(t1);
            scand = false;
            $(".lab_qrcode_text").show();
            break;
        }
        break;
      case 'timeout':
        clearInterval(t1);
        scand = false;
    }
  }
</script>
</body>
</html>